<template>
	<!-- 文章管理页面 -->
	<div>
		<h1>文章管理页面</h1>

		<el-button type="primary" @click="dialogVisible = true">添加</el-button>

		<el-dialog v-model="editVisible" title="编辑">
			<el-form :model="editFormItem">
				<el-form-item label="标题">
					<el-input v-model="editFormItem.title"></el-input>
				</el-form-item>
				<el-form-item label="内容">
					<el-input v-model="editFormItem.content"></el-input>
				</el-form-item>
				<el-button type="primary" @click="onEditSureBtn">确定</el-button>
				<el-button type="primary" @click="onCancleBtn">取消</el-button>
			</el-form>
		</el-dialog>

		<el-dialog v-model="dialogVisible" title="添加">
			<el-form :model="formItem">
				<el-form-item label="标题">
					<el-input v-model="formItem.title"></el-input>
				</el-form-item>
				<el-form-item label="内容">
					<el-input v-model="formItem.content"></el-input>
				</el-form-item>
				<el-button type="primary" @click="onAddClick">添加</el-button>
			</el-form>
		</el-dialog>

		<hr />

		<el-table :data="blogsList">
			<el-table-column prop="id" label="ID"></el-table-column>
			<el-table-column prop="title" label="标题"></el-table-column>
			<el-table-column prop="content" label="内容"></el-table-column>
			<el-table-column prop="userId" label="作者"></el-table-column>
			<el-table-column prop="createTime" label="时间"></el-table-column>
			<el-table-column lable="操作">
				<template #default="scope">
					<el-button size="mini" @click="onEditDialogShow(scope.row)"
						>编辑</el-button
					>
					<el-button size="mini" type="danger" @click="onDeleteClick(scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@current-change="onChange"
			background
			layout="prev, pager, next"
			:total="total"
			:default-page-size="opt.size"
		>
		</el-pagination>
	</div>
</template>
<script>
// 1. 拿到所有的文章数据
// 2. 编辑文章
// 3. 添加文字
// 4. 删除文章
// 5. 添加评论

/**
 * 1. 点击编辑按钮 保存一份数据
 * 2. 如果用户点击取消，就将保存的数据赋值
 *
 */
import axios from 'axios'
import moment from 'moment'
export default {
	data() {
		return {
			formItem: {},
			editFormItem: {},
			// 保存一份副本
			editCancleItem: {},
			blogsList: [],
			dialogVisible: false,
			editVisible: false,
			opt: {
				page: 1,
				size: 5
			},
			total: 100
		}
	},
	created() {
		this.getBlogsData()
	},
	methods: {
		// 取消按钮
		onCancleBtn() {
			this.editVisible = false
			console.log('我是保存的副本', this.editCancleItem)
			this.editFormItem = this.editCancleItem
			console.log(this.editFormItem, '这个是渲染在表格中的数据')
			// this.getBlogsData()
		},
		// 删除
		async onDeleteClick(row) {
			console.log('删除接口')
			const token = localStorage.getItem('token')
			console.log(token, 'token')
			const deleteData = await axios.delete(`/api/blogs/${row.id}`, {
				headers: {
					token
				}
			})
			if (deleteData.data.code === 0) {
				this.getBlogsData()
			}
			console.log(deleteData, 'delteData')
		},
		// 编辑确定
		async onEditSureBtn() {
			const token = localStorage.getItem('token')
			const { id } = this.editFormItem
			console.log(this.editFormItem, '改变后的数据')
			const data = await axios.put(
				`/api/blogs/${id}`,
				{ ...this.editFormItem },
				{
					headers: {
						token
					}
				}
			)
			if (data.data.code === 0) {
				this.editVisible = false
				this.getBlogsData()
			}
			console.log(data, 'data----------')
		},
		// 编辑弹出框
		onEditDialogShow(row) {
			// 保存一份副本x`x`
			// this.editCancleItem = JSON.parse(JSON.stringify(row))
			// console.log(this.editCancleItem, 'this.editCancleItem')
			this.editVisible = true
			// row ->
			this.editFormItem = JSON.parse(JSON.stringify(row))
			console.log(row, 'row')
		},
		// 添加
		async onAddClick() {
			const token = localStorage.getItem('token')
			console.log(this.formItem, 'formItem')
			const insertData = await axios.post(
				'/api/blogs',
				{ ...this.formItem },
				{
					headers: { token }
				}
			)
			if (insertData.data.code === 0) {
				this.getBlogsData()
				this.dialogVisible = false
			}

			console.log('insertData:', insertData)
		},
		onChange(page) {
			this.opt.page = page
			this.getBlogsData()
		},
		async getBlogsData() {
			const token = localStorage.getItem('token')
			const blogsList = await axios.get('/api/blogs', {
				params: {
					page: this.opt.page,
					size: this.opt.size
				},
				headers: {
					token
				}
			})
			// 时间转换格式
			const data = blogsList.data.data.list
			data.forEach((item) => {
				item.createTime = moment(item.createTime).format('YYYY-MM-DD')
			})
			this.total = blogsList.data.data.count
			this.blogsList = data
		}
	}
}
</script>
